import React from 'react';
import { Upload, message, Button, Icon } from 'antd';
import { UploadProps } from "antd/lib/upload";
import { UploadFile,UploadChangeParam } from "antd/lib/upload/interface";
import StorageUtils from '@/utils/StorageUtils';

/**
 * antd的upload组件.
 * 
 * https://www.yuque.com/ant-design/course/wvbsue
 */
class UploadView extends React.Component {
    uploadProps:UploadProps = {
        name: "file",
        accept: ".txt,.docx,.xlsx,.pptx",
        action: "//jsonplaceholder.typicode.com/posts/",
        headers: { "Content-Type": "multipart/form-data", "session_id": StorageUtils.getSessionId() },
        onChange: (info:UploadChangeParam) => {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
        //点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除。
        onRemove:(file:UploadFile)=>{
            //file.name 把文件名发到后台去,删除成功后,则return true,否则false
            return true;
        }
    }

    render() {
        return (
            <div>
                <Upload
                    {...this.uploadProps}
                >
                    <Button><Icon type="upload" />click to upload</Button>
                </Upload >
            </div>
        );
    }

}

export default UploadView;
